<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>条件渲染</title>
</head>
<body>
    <div id="app">
        <h1>v-show</h1>
        <div>
            v-show实际上是操作了该节点的display属性  display: none;  // 
        </div>
        <h2 v-show="showConfig">欢迎来到条件渲染v-show</h2>
        <hr>
        <h1>v-if</h1>
        <div>
            v-if  /   v-else-if   /  v-else 
            注意，v-else-if 前面必须要有v-if，而且不能被打断，v-else前面必须有v-if或者v-else-if
        </div>
        <h2 v-if="ifConfig">欢迎来到条件渲染v-if</h2>
        <hr>
        <b style="color: red;">如果切换频繁，建议使用v-show，如果使用v-if，也许可能获取不到DOM结点，v-show一定可以获取到DOM结点</b>
    </div>
    <script>
        const vm = new Vue({
            data(){
                return {
                    showConfig:true,
                    ifConfig:true,
                }
            }
        }).$mount('#app')
    </script>
</body>
</html>